<template>
  <view class="star-container" :style="{ left: x, top: y }" @click="handleClick">
    <text class="star" :class="['star-state-' + state]" :style="{ fontSize: size + 'rpx' }">★</text>
    <text class="star-name">{{ name }}</text>
  </view>
</template>

<script>
export default {
  name: 'Star',
  props: {
    // 0: 未学习(灰色), 1: 初学习(灰白色), 2: 熟练(点亮), 3: 掌握(点亮光晕)
    state: {
      type: Number,
      default: 0,
      validator: value => [0, 1, 2, 3].includes(value)
    },
    name: {
      type: String,
      required: true
    },
    // 位置百分比
    x: {
      type: String,
      default: '50%'
    },
    y: {
      type: String,
      default: '50%'
    },
    // 大小(rpx)
    size: {
      type: Number,
      default: 40
    },
    // 星星id
    id: {
      type: Number,
      required: true
    }
  },
  methods: {
    handleClick() {
      // 触发点击事件，传递星星id给父组件
      this.$emit('click', { id: this.id });
    }
  }
}
</script>

<style scoped>
.star-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.star {
  transition: all 0.3s ease;
}

/* 未学习 - 灰色 */
.star-state-0 {
  color: #888888;
}

/* 初学习 - 灰白色 */
.star-state-1 {
  color: #cccccc;
}

/* 熟练 - 点亮 */
.star-state-2 {
  color: #ffd700;
}

/* 掌握 - 点亮光晕 */
.star-state-3 {
  color: #ffd700;
  text-shadow: 0 0 10rpx #ffd700, 0 0 20rpx #ffd700, 0 0 30rpx #ffd700;
}

.star-name {
  font-size: 24rpx;
  color: #ffffff;
  margin-top: 10rpx;
  text-shadow: 0 0 5rpx rgba(0, 0, 0, 0.5);
}
</style>